<template>
  <div class="customer">
    <div class="up flex">
      <div class="left">
        <div class="title flex">
          <div>进港投诉</div>
          <SelectDateRange refName="2" @getDate="getDate" />
        </div>
        <div class="data flex">
          <div class="chart">
            <Doughnut
              :flag="true"
              :interval="10"
              :optionData="optionDataT[0]"
            />
          </div>
          <div class="table">
            <el-table height="100%" :data="entryTableData">
              <el-table-column label="单号" prop="billCode" />
              <el-table-column label="工单类型" prop="categoryPathName" />
              <el-table-column label="到件扫描组织" prop="arrScanOrgName" />
              <el-table-column label="派件员" prop="deliveryUserName" />
            </el-table>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="title">虚假签收</div>
        <div class="chart">
          <Rose :optionData="optionData[2]" />
        </div>
        <div v-if="falseSignature">
          <div
            class="item flex"
            v-for="(item, index) in falseSignatureItems"
            :key="index"
          >
            <div class="text">{{ item.text }}</div>
            <div class="score">
              <Score
                :showText="false"
                :percentage="falseSignature[item.value]"
              />
            </div>
            <div class="number">{{ falseSignature[item.value] }}%</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title flex">
          <div>工单解决率</div>
          <SelectNetwork />
        </div>
        <div v-if="resolution" class="flex">
          <div class="chart flex">
            <div
              class="item"
              v-for="(item, index) in resolutionItems"
              :key="index"
            >
              <Annulus
                :strokeWidth="20"
                :color="item.color"
                :percentage="parseInt(resolution[item.value])"
              />
              <div class="text">{{ item.text }}</div>
            </div>
          </div>
          <div class="tips">
            <div class="item">
              <div class="text">应首跟量</div>
              <div class="number">
                {{ resolution.shouldFollowTheQuantityFirst }}
              </div>
            </div>
            <div class="item">
              <div class="text">应处理量</div>
              <div class="number">
                {{ resolution.handlingCapacity }}
              </div>
            </div>
            <div class="item">
              <div class="text">平均处理时长</div>
              <div class="number">
                {{ resolution.averageProcessingTime }}
              </div>
            </div>
            <div class="item">
              <div class="text">平均首跟时长</div>
              <div class="number">
                {{ resolution.averageFirstHeelDuration }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="down flex">
      <div class="left">
        <div class="title flex">
          <div>理赔账单-我投诉的</div>
          <SelectDateRange refName="1" @getDate="getDate" />
        </div>
        <div class="data flex">
          <div class="chart">
            <Rose
              :min="30"
              :max="80"
              top="bottom"
              right="center"
              x="50%"
              y="40%"
              :optionData="optionData[1]"
            />
          </div>
          <div class="table">
            <el-table height="100%" :data="tableDatas[1]">
              <el-table-column label="单号" prop="transportCode" />
              <el-table-column label="一级类型" prop="claimType" />
              <el-table-column label="网点名称" prop="networkName" />
              <el-table-column label="处理结果" prop="handlingResult" />
            </el-table>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="title flex">
          <div>理赔账单-投诉我的</div>
          <SelectDateRange refName="0" @getDate="getDate" />
        </div>
        <div class="data flex">
          <div class="chart">
            <Rose
              :min="30"
              :max="80"
              top="bottom"
              right="center"
              x="50%"
              y="40%"
              :optionData="optionData[0]"
            />
          </div>
          <div class="table">
            <el-table height="100%" :data="tableDatas[0]">
              <el-table-column label="单号" prop="transportCode" />
              <el-table-column label="一级类型" prop="claimType" />
              <el-table-column label="网点名称" prop="networkName" />
              <el-table-column label="处理结果" prop="handlingResult" />
            </el-table>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title flex">
          <div>客诉工单</div>
          <SelectDateRange refName="3" @getDate="getDate" />
        </div>
        <div class="chart">
          <Doughnut
            :flag="true"
            :interval="2"
            right="-5%"
            :optionData="optionDataT[1]"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getChartsThree,
  getComplaintList,
  getChartsTwo,
  getFalseSignature,
  getEntryComplaint,
  getResolution,
} from "@/api/customReport";
import { getDateYMD } from "@/utils";

export default {
  name: "Customer",
  data() {
    return {
      optionData: [],
      tableDatas: [], // 0投诉我的 1我投诉的
      optionDataT: [], // 0进港投诉 1客诉工单
      entryTableData: [],
      pageDatas: [
        {
          pageNum: 1,
          pageSize: 10,
        },
        {
          pageNum: 1,
          pageSize: 10,
        },
      ],
      falseSignatureItems: [
        {
          text: "是否履约成功",
          value: "isPerformance",
        },
        {
          text: "短信标通知",
          value: "smsNotification",
        },
        {
          text: "是否可申诉",
          value: "isItAppealable",
        },
      ],
      falseSignature: null,
      resolutionItems: [
        {
          text: "首跟超时率",
          value: "firstFollowUpTimeoutRate",
        },
        {
          text: "处理超时率",
          value: "processingTimeoutRate",
          color: "#F4B259",
        },
        {
          text: "工单完结率",
          value: "workOrderCompletionRate",
          color: "#30C86D",
        },
        {
          text: "一次性解决率",
          value: "oneTimeResolutionRate",
        },
      ],
      resolution: null,
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      for (let i = 0; i < 3; i++) {
        const res = await this.getChartsThreeData(i, {
          startTime: getDateYMD(),
          endTime: getDateYMD(),
        });
        this.optionData.push(res);
      }
      for (let i = 0; i < 2; i++) {
        const res = await this.getComplaintListData(
          i,
          {
            startTime: getDateYMD(),
            endTime: getDateYMD(),
          },
          {
            pageSize: 10,
            pageNum: 1,
          }
        );
        this.tableDatas.push(res);
        const data = await this.getChartsTwoData(i, {
          startTime: getDateYMD(),
          endTime: getDateYMD(),
        });
        this.optionDataT.push(data);
      }
      this.getFalseSignatureData();
      this.getEntryComplaintData({
        startTime: getDateYMD(),
        endTime: getDateYMD(),
      });
      this.getResolutionData();
    },
    async getResolutionData() {
      const res = await getResolution();
      this.resolution = res.data;
    },
    async getEntryComplaintData(date) {
      const res = await getEntryComplaint({
        ...date,
        pageDate: {
          pageNum: 1,
          pageSize: 10000,
        },
      });
      this.entryTableData = res.data;
    },
    async getFalseSignatureData() {
      const res = await getFalseSignature();
      this.falseSignature = res.data;
    },
    async getComplaintListData(type, date, pageDate) {
      const res = await getComplaintList({
        type,
        byDateAndPageVo: {
          ...date,
          pageDate,
        },
      });
      return res.data;
    },
    async getChartsThreeData(type, date) {
      const res = await getChartsThree({
        type,
        byDateVo: date,
      });
      return res.data;
    },
    async getChartsTwoData(type, date) {
      const res = await getChartsTwo({
        type,
        byDateVo: date,
      });
      return res.data;
    },
    async getDate(item) {
      if (item.ref > 1) {
        const optionData = await this.getChartsTwoData(
          item.ref - 2,
          item.byDateVo
        );
        this.$set(this.optionDataT, item.ref - 2, optionData);
        this.getEntryComplaintData(item.byDateVo);
      } else {
        const optionData = await this.getChartsThreeData(
          item.ref,
          item.byDateVo
        );
        const tableData = await this.getComplaintListData(
          item.ref,
          item.byDateVo,
          this.pageDatas[item.ref]
        );
        this.$set(this.optionData, item.ref, optionData);
        this.$set(this.tableDatas, item.ref, tableData);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.customer {
  padding: 30px 10px 30px 30px;
  width: 100%;
  height: 100%;
  background: #f5f5f5;

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title {
    font-weight: 400;
    font-size: 20px;
    color: #333333;
  }

  .up > div,
  .down > div {
    padding: 24px;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    border-radius: 8px;
  }

  .el-table {
    border: 1px solid #ebecee;
    border-radius: 8px;

    &::v-deep .el-table__header tr th {
      border-bottom: none;
      text-align: center;
      background: #fafafa;
      color: #333;
    }

    &::v-deep .el-table__body tr td {
      border-bottom: none;
      background: #fafafa;
    }
  }

  .up {
    height: 482px;

    .left {
      width: 914px;

      .data {
        .chart {
          margin-top: 50px;
          width: 408px;
          height: 380px;
        }

        .table {
          width: 438px;
          height: 376px;
        }
      }
    }

    .center {
      width: 400px;

      .chart {
        margin: 10px 0 30px;
        height: 260px;

        div {
          height: 100%;
        }
      }

      .item {
        .text {
          width: 96px;
          text-align: right;
          color: #666;
        }

        .score {
          width: 200px;
        }

        .number {
          width: 40px;
          color: #2087d0;
        }
      }

      .item + .item {
        margin-top: 20px;
      }
    }

    .right {
      width: 506px;

      .flex {
        .chart {
          width: 316px;
          flex-wrap: wrap;

          .item {
            margin-top: 20px;
            width: 148px;
            height: 180px;
            text-align: center;

            .text {
              margin-top: 12px;
              color: #666;
            }

            .el-progress {
              &::v-deep .el-progress__text {
                font-size: 24px !important;
              }
            }
          }
        }

        .tips {
          width: 120px;
          height: 400px;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .item {
            height: 48px;

            .number {
              margin-top: 16px;
              color: #2087d0;
            }
          }

          .item + .item {
            margin-top: 22px;
          }
        }
      }
    }
  }

  .down {
    margin-top: 20px;
    height: 392px;

    .left,
    .center {
      width: 728px;

      .data {
        margin-top: 24px;
        height: 290px;

        & > div {
          height: 100%;
        }

        .chart {
          width: 200px;

          div {
            height: 100%;
          }
        }

        .table {
          width: 460px;
          height: 290px;
        }
      }
    }

    .center {
      width: 728px;
    }

    .right {
      width: 364px;

      .chart {
        margin-top: 20px;
        margin-left: -30px;
        width: 350px;
        height: 320px;

        div {
          width: 100%;
        }
      }
    }
  }
}
</style>
